<template>
  <div id="app">
    <div class="container">
      <!-- 顶部框模块 -->
      <div class="form-group">
        <div class="input-group">
          <h4>品牌管理</h4>
        </div>
      </div>

      <!-- 数据表格 -->
      <table class="table table-bordered table-hover mt-2">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <!-- 如果价格超过100，就有red这个类 -->
            <!-- <td :class="{ red: item.price > 100 }">{{ item.price }}</td> -->

            <!-- 
              :style 设置样式，配合三元
              :style="{css属性名+值}"
              -->
            <td :style="{ color: item.price > 100 ? 'red' : '' }">
              {{ item.price }}
            </td>
            <td>{{ item.time | formatTime(time) }}</td>

            <!-- href="#" 返回顶部  .prevent 组织返回顶部-->
            <td><a href="#" @click.prevent="delFn(item.id)">删除</a></td>
          </tr>

          <!-- 
            不用循环，展示总价 和 平均价 
            当list长度不为0的时候，才显示数组
            -->
          <tr
            style="background-color: #eee"
            v-show="list.length !== 0"
            v-if="list.length !== 0"
          >
            <td>统计:</td>
            <td colspan="2">总价钱为:{{ allPrice }}</td>
            <td colspan="2">平均价:{{ avgPrice }}</td>
          </tr>
        </tbody>
        <!-- 底部的提示消息 -->

        <!-- 加显示条件，length === 0 时显示 -->
        <tfoot v-show="list.length === 0">
          <tr>
            <td colspan="5" style="text-align: center">暂无数据</td>
          </tr>
        </tfoot>
      </table>

      <!-- 添加资产 -->
      <form class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="资产名称"
              v-model="name"
            />
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="价格"
              v-model.number="price"
            />
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 阻止表单提交 -->
        <button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
      </form>
    </div>
  </div>
</template>

<script>
// 注册局部的过滤器 + 处理时间 配和moment包一起来使用

// 把moment包导入进来
import moment from "moment";

export default {
  data() {
    return {
      name: "", // 名称
      price: 0, // 价格
      // 从本地取出list
      list: JSON.parse(localStorage.getItem("pList")) || [],

      // list: [
      //   {
      //     id: 100,
      //     name: "外套",
      //     price: 199,
      //     time: new Date("2010-08-12"),
      //   },
      //   {
      //     id: 101,
      //     name: "裤子",
      //     price: 34,
      //     time: new Date("2013-09-01"),
      //   },
      //   {
      //     id: 102,
      //     name: "鞋",
      //     price: 25.4,
      //     time: new Date("2018-11-22"),
      //   },
      //   {
      //     id: 103,
      //     name: "头发",
      //     price: 19900,
      //     time: new Date("2020-12-12"),
      //   },
      // ],
    };
  },
  methods: {
    addFn() {
      // 判断是否为空
      if (this.name.trim().length == 0 || this.price <= 0) {
        return;
      }

      // vue 核心：操作数据 给list数组添加数据 push()到最后面
      // 把值以对象形式插入list
      this.list.push({
        id: +new Date(), //id是后端处理的
        name: this.name,
        price: this.price,
        time: new Date(),
      }),
        (this.name = ""),
        (this.price = "");
    },
    delFn(id) {
      //通过id找到这条数据在数组中的下标
      //! 方法1
      // let index = this.list.findIndex((obj) => obj.id === id);
      // this.list.splice(index, 1);

      //! 方法2
      // 要删除id为100的数据，意味着过滤出id不为100的数据 => filter
      // this.list.filter((item) => item.id !== 100);
      // const arr = this.list.filter((item) => item.id !== id);
      // filter不会修改原数组 ，v-for不会更新检测，把filter过滤得到新数组赋值给list
      // this.list = arr;

      //! 一步到位
      this.list = this.list.filter((item) => item.id !== id);
    },

    // addFn() {
    //   // 判断是否为空
    //   if (this.name.trim().length == 0 || this.price === 0) {
    //     return;
    //   }
    //   //解决bug：无数组新增-list没有数据，id需要给一个固定值
    //   let id =
    //     this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100;
    //   this.list.push({
    //     id: this.list[this.list.length - 1].id + 1,
    //     name: this.name,
    //     price: this.price,
    //     time: new Date(),
    //   });
    // },
    // //传入id到事件方法中
    // delFn(id) {
    //   let index = this.list.findIndex((obj) => obj.id === id);
    //   this.list.splice(index, 1);
    // },
  },
  filters: {
    formatTime(time) {
      //time就是需要处理的时间
      //记得把处理好的时间格式返回出去
      return moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  // 定义计算属性
  computed: {
    allPrice() {
      //总价
      return this.list.reduce((sum, obj) => (sum += obj.price), 0);
    },
    avgPrice() {
      // 平均价
      // 通过this还可以拿到计算属性
      return (this.allPrice / this.list.length).toFixed(2);
    },
  },
  watch: {
    // 方法一
    // list: {
    //   handler() {
    //     localStorage.setItem("pList", JSON.stringify(this.list));
    //   },
    //   deep: true,
    // },

    // 方法二
    list: {
      handler(newVal) {
        localStorage.setItem("pList", JSON.stringify(newVal));
      },
      deep: true,
    },
  },
};
</script>

<style>
.red {
  color: red;
}
</style>
